<template>
	<!-- <view class="center"> -->
	<view class="">
		<u-toast ref="uToast" />
		<u-modal v-model="showModel" :content="modelContent" show-cancel-button @confirm="modelConfirm" z-index="9999"></u-modal>
		<view class="pad_bot" v-if="isBind">
			<!-- 头部 -->
			<view class="top_box">
				<view class="top" :style="{'height':phoneHeight+45+'px','position':'relative',}">
					<text class="top_tit"> 云管控 </text>
				</view>
				<view class="header_info  pad_big mar_top_big">
					<view class="box box-align-center ">
						<view class="avatar">
							<image :src="snInfo.avatar?snInfo.avatar:defAvatar" mode="widthFix" style="width: 140rpx;border-radius: 50%; margin-top: -50rpx;"></image>
						</view>
						<view class="user_info pad_def">
							<view class="box box-pack-between box-align-center pad_bot">
								<view class="username ">{{snInfo.name?snInfo.name:'未设置'}}</view>
								<view class="">学生平板状态:<text style="color: #34a9a2;" v-if="isOnline==1"> 在线</text><text style="color: #ff0000;" v-else> 离线</text></view>
							</view>
							<view class="other_info">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/location.png" mode="widthFix" style="width: 30rpx;padding-right: 5px;"></image>
								<text>{{snInfo.addr?snInfo.addr:'暂无'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="remote">
				<view class="header">
					<text class="tipText">远程快捷操作</text>
					<view class="status" @click="gotoIpad">
						<text class="videoText">查看状态</text>
						<u-icon name="list" color="#b2b2b2" size="40"></u-icon>
					</view>
					<view class="video" v-if="false">
						<text class="videoText">视频演示</text>
						<u-icon name="play-circle" color="#b2b2b2" size="40"></u-icon>
					</view>
				</view>
				<view class="box">
					<view class="remote_item" v-for="(item, i) in remoteList" :key="i" @click="gotoRemoteUrl(item.url, item.tit)">
						<view>
							<image :src="item.img" mode="widthFix" style="width: 120rpx;"></image>
							<view>{{item.tit}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 平板使用时间管控 -->
			<view class="common">
				<view class="header">
					<text class="tipText">平板使用时间管控</text>
					<view class="video" v-if="false">
						<text class="videoText">视频演示</text>
						<u-icon name="play-circle" color="#b2b2b2" size="40"></u-icon>
					</view>
				</view>
				<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in timeControlList" :key="i" @click="gotoUrl(item.url)">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="" style="margin-right: 10rpx;">
								<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
							</view>
							<view>{{item.tit}}</view>
						</view>
						<view class="icons">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
					<view class="control_line"></view>
				</view>
				<view class="app_use_record_footer pad_bot"></view>
			</view>
			<!-- 影音娱乐封闭管控 -->
			<view class="common">
				<view class="header">
					<text class="tipText">影音娱乐封闭管控</text>
					<view class="video" v-if="false">
						<text class="videoText">视频演示</text>
						<u-icon name="play-circle" color="#b2b2b2" size="40"></u-icon>
					</view>
				</view>
				<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in playControlList" :key="i" @click="gotoUrl(item.url)">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="" style="margin-right: 10rpx;">
								<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
							</view>
							<view>{{item.tit}}</view>
						</view>
						<view class="icons">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
					<view class="control_line"></view>
				</view>
				<view class="app_use_record_footer pad_bot"></view>
			</view>

			<!-- 云端守护设置 -->
			<view class="common">
				<view class="header">
					<text class="tipText">云端守护设置</text>
					<view class="video" v-if="false">
						<text class="videoText">视频演示</text>
						<u-icon name="play-circle" color="#b2b2b2" size="40"></u-icon>
					</view>
				</view>
				<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in domainControlList" :key="i" @click="gotoUrl(item.url)">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="" style="margin-right: 10rpx;">
								<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
							</view>
							<view>{{item.tit}}</view>
						</view>
						<view class="icons">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
					<view class="control_line"></view>
				</view>
				<view class="app_use_record_footer pad_bot"></view>
			</view>
			<!-- 更多其他功能管控 -->
			<view class="common">
				<view class="header">
					<text class="tipText">更多其他功能管控</text>
					<view class="video" v-if="false">
						<text class="videoText">视频演示</text>
						<u-icon name="play-circle" color="#b2b2b2" size="40"></u-icon>
					</view>
				</view>
				<view class="control_item box box-pack-between pad_def pad_bot_big" v-for="(item,i) in otherControlList" :key="i" @click="gotoUrl(item.url)">
					<view class="box box-align-center box-pack-between" style="width: 100%;">
						<view class="box box-align-center box-pack-between">
							<view class="" style="margin-right: 10rpx;">
								<image :src="item.img" mode="widthFix" style="width: 60rpx;"></image>
							</view>
							<view>{{item.tit}}</view>
						</view>
						<view class="icons">
							<u-icon name="arrow-right" color="#cccccc"></u-icon>
						</view>
					</view>
					<view class="control_line"></view>
				</view>
				<view class="app_use_record_footer pad_bot"></view>
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty text="请绑定设备" src="" icon-size="220" font-size="36"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		querySnLogInfo,
		checkRefresh,
		queryAppLog,
		querySumAppLog,
		getAppInstall,
		querySysApp,
		getAppUseTimeLog,
		querySnIdScreenshot,
		screenIsLock,
		queryTimeControl,
		snRestControl,
		snRestartControl
	} from '@/api/userHome.js'
	import { getUserInfo } from '@/api/my.js';
	import { mapGetters, mapMutations, mapActions } from 'vuex';

	export default {
		data() {
			return {
				is_screen_lock: 0,
				showModel: false,
				modelContent: '',
				timeTxt: '请设置使用管理',
				snNumber: 0,
				phoneHeight: '',
				remoteType: 0, //1:远程重置 2:远程截屏 3:远程锁屏 4:远程重启
				remoteList: [
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/remote1.png', tit: '远程重置', url: '/pages_subpackage/timeControl/index' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/remote2.png', tit: '远程截屏', url: '/pages_subpackage/screenControl/screenControl' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/remote3.png', tit: '远程锁屏', url: '/pages_subpackage/timeControl/index' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/remote4.png', tit: '远程重启', url: '/pages_subpackage/timeControl/index' },
				],
				timeControlList: [
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/timeControl1.png', tit: '整机允许/禁用使用时段设置', url: '/pages_subpackage/timeControl/index?type=machine' },
					// {img:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/timeControl2.png',tit:'应用允许/禁用使用时段设置',url:'/pages/userHome/timeControl/index?type=app'},
					// {img:'../../static/imgs/timeControl3.png',tit:'应用限额/限制批量应用设置',url:'/pages/userHome/timeControl/index'},
				],
				playControlList: [
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/play1.png', tit: 'APP应用管控策略设置', url: '/pages_subpackage/appControl/index' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/play2.png', tit: '上网浏览管控策略设置', url: '/pages_subpackage/websiteControl/newIndex' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/play3.png', tit: '影音娱乐管控策略设置', url: '/pages_subpackage/recreationControl/index' },
				],
				domainControlList: [
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/domain1.png', tit: '亲情号码白名单设置', url: '/pages_subpackage/phoneControl/index' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/domain2.png', tit: '远程设置平板护眼策略', url: '/pages_subpackage/eyeshieldControl/index' },
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/domain3.png', tit: '安全定位查找设备', url: '/pages_subpackage/snLocation/index' },
				],
				otherControlList: [
					{ img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/other1.png', tit: '安卓系统常用功能管控策略设置', url: '/pages_subpackage/androidControl/index' },
					// {img:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/other2.png',tit:'拍照搜题功能管控策略设置',url:'/pages_subpackage/photoControl/index'},
				]
			}
		},
		onLoad() {
			this.getPhoneHeight()
		},
		onShow() {
			if (this.snInfo.id) {
				this.getqueryTimeControl()
				this.getquerySnIdScreenshot()
			}
			this.getSnOnline()
		},
		onHide() {},
		computed: {
			...mapGetters(['isBind', 'snInfo', 'isOnline'])
		},
		methods: {
			...mapActions(['getSnOnline']),
			gotoUrl(url) {
				if (!url) return
				uni.navigateTo({
					url: url
				})
			},
			getPhoneHeight() { //获取高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.phoneHeight = res.statusBarHeight
					},
				});
			},
			gotoRemoteUrl(url, tit) {
				switch (tit) {
					case '远程重置':
						this.modelContent = "是否远程重置设备"
						this.showModel = true
						this.remoteType = 1
						break
					case '远程截屏':
						uni.navigateTo({
							url: url
						})
						break
					case '远程锁屏':
						this.modelContent = !this.is_screen_lock ? '是否需要锁定屏幕' : '屏幕已锁定,是否需要解锁屏幕'
						this.showModel = true
						this.remoteType = 3
						break
					case '远程重启':
						this.modelContent = "是否需要重启设备"
						this.showModel = true
						this.remoteType = 4
						break
				}
			},
			modelConfirm() {
				switch (this.remoteType) {
					case 1:
						snRestControl({
							id: this.snInfo.id
						}).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
						break
					case 3:
						screenIsLock({
							id: this.snInfo.id,
							is_screen_lock: Number(!this.is_screen_lock)
						}).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
							this.getquerySnIdScreenshot()
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
						break
					case 4:
						snRestartControl({
							id: this.snInfo.id
						}).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								icon: false
							})
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
				}
			},

			//获取设备时间管控
			getqueryTimeControl() {
				queryTimeControl({
					id: this.snInfo.id,
					type: 0
				}).then(res => {
					this.timeTxt = `${res.data.timeControl.start_time} - ${res.data.timeControl.end_time}`
				}).catch(err => {
					this.timeTxt = '请设置使用管理'
				})
			},
			//锁屏截屏的change事件
			screenSwitch(val) {
				this.modelContent = !this.is_screen_lock ? '是否需要锁定屏幕' : '是否需要解锁屏幕'
				this.lockControl = true
			},
			//获取屏幕锁定和截图
			getquerySnIdScreenshot() {
				querySnIdScreenshot({
					id: this.snInfo.id
				}).then(res => {
					this.is_screen_lock = res.data.is_screen_lock
				}).catch(err => {})
			},
			gotoIpad() {
				uni.navigateTo({
					url: '/pages_subpackage/userHome/ipadInfo/index?snId=' + this.snID
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f1f2f6;
	}
</style>

<style lang="less" scoped>
	.top_box {
		// background-positio0%;
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing.png');
		background-repeat: no-repeat;
		background-size: 100%;
		color: #ffffff;
		padding-bottom: 60rpx;
	}

	.top {
		position: fixed;
		top: 0;

		.top_tit {
			position: absolute;
			bottom: 10px;
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 40rpx;
		}
	}

	.header_info {
		.user_info {
			display: flex;
			flex-direction: column;
			justify-conent: space-between;
			flex: 1;

			.username {
				font-size: 32rpx;
			}
		}

		.other_info {
			// padding-left: 160rpx;
			font-size: 24rpx;
			// padding-top: 20rpx;
			color: #babcc1;
		}
	}

	//记录公共模块
	.app_use_record,
	.web_record,
	.control_list {
		margin: 40rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #f2f2f2;

		.app_use_record_header {
			display: flex;
			justify-content: flex-end;
			background-repeat: no-repeat;
			padding-bottom: 60rpx;
		}

		.app_use_record_footer {
			background-color: #fff;
			font-size: 24rpx;
			color: #b8b8b8;
			text-align: right;
			padding-right: 20rpx;
		}
	}

	.remote {
		margin: 40rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #f2f2f2;
		background-color: #fff;
		border-radius: 40rpx;
		height: 350rpx;

		.header {
			display: flex;
			justify-content: space-between;
			background-repeat: no-repeat;
			padding-bottom: 60rpx;
			padding-top: 28rpx;

			.tipText {
				text-align: center;
				font-weight: bolder;
				font-size: 30rpx;
				margin-left: 16rpx;
			}

			.videoText {
				color: #b2b2b2;
				padding: 0rpx;
				margin-right: 10rpx;
			}
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			background-color: #fff;
			font-size: 24rpx;
			justify-content: center;
		}

		.remote_item {
			margin: auto;
		}
	}

	.common {
		margin: 40rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0px 0px 10px 3px #f2f2f2;
		background-color: #fff;
		border-radius: 40rpx;

		.header {
			display: flex;
			justify-content: space-between;
			background-repeat: no-repeat;
			padding-bottom: 60rpx;
			padding-top: 28rpx;

			.tipText {
				text-align: center;
				font-weight: bolder;
				font-size: 30rpx;
				margin-left: 16rpx;
			}

			.videoText {
				color: #b2b2b2;
				padding: 0rpx;
				margin-right: 10rpx;
			}
		}
	}

	image {
		height: 100%;
		width: 100%;
	}
</style>